<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ChatRound } from "@element-plus/icons-vue";

const router = useRouter();

interface Nav {
  path: string;
  title: string;
  icon: any;
}

// 导航列表
const navList = ref<Nav[]>([
  {
    path: "/aiChat",
    title: "AI工具",
    icon: ChatRound,
  },
]);

/**
 * 点击导航菜单的处理
 * @param navItem
 */
const navClickHandle = (navItem: Nav) => {
  router.push(navItem.path);
};

/**
 * 点击logo的处理
 */
const logoImgClickHandle = () => {
  window.location.href = "https://ydcode.cn/";
};
</script>

<template>
  <div class="page-header">
    <div class="page-header-wrapper">
      <!-- logo -->
      <el-image
        class="logo-image"
        src="https://ydcqoss.ydcode.cn/static/common/logo-white.png"
        fit="cover"
        @click="logoImgClickHandle"
      />

      <!-- 导航 -->
      <nav>
        <span
          v-for="(navItem, index) of navList"
          :key="index"
          class="nav-item"
          :class="{ active: navItem.path === router.currentRoute.value.path }"
          @click="navClickHandle(navItem)"
        >
          <el-icon> <component :is="navItem.icon"> </component></el-icon>
          <span>{{ navItem.title }}</span>
        </span>
      </nav>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .page-header-wrapper {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  // logo
  .logo-image {
    width: auto;
    height: 28px;
    cursor: pointer;
  }

  // 导航
  nav {
    display: flex;
    align-items: center;
    .nav-item {
      margin-left: 60px;
      display: flex;
      align-items: center;
      cursor: pointer;

      i {
        width: 24px;
        height: 24px;
        // margin-right: 6px;
      }

      &:hover {
        color: $primary-color;
      }

      &.active {
        color: $primary-color;

        i {
          color: $primary-color;
        }
      }
    }
  }
}
</style>
